<template>
  <a-col :span="labelSpan" class="col-label-wrap" :class="[isVertical]">
    <label class="col-label__label" :style="[textlAlign, labelWidthSize]">{{ label }}:</label>
    <div class="col-label__inner">
      <slot v-if="$slots.default"></slot>
      <span v-else>{{ IS_NULL_CONTENT }}</span>
    </div>
  </a-col>
</template>
<script setup>
  import { computed, inject, useSlots } from "vue"
  import { useStyle } from "@/hook/index"
  import { IS_NULL_CONTENT } from "@/constant"

  const slots = useSlots()
  // hook
  const us = useStyle()
  const props = defineProps({
    label: {
      type: String,
      default: "",
    },
    labelAlign: {
      type: String,
      defualt: "",
    },
    labelWidth: {
      type: String,
      default: "",
    },
    span: {
      type: Number,
      default: 0,
    },
    vertical: Boolean,
  })

  const colLabelKey = inject("colLabelKey", undefined)

  const isVertical = computed(() => (slots.default?.() && props.vertical ? "is-vertical" : ""))

  // isGroup
  const isGroup = colLabelKey !== undefined

  // align
  const textlAlign = computed(() => {
    const align = props.labelAlign || (isGroup ? colLabelKey?.labelAlign?.value : props.labelAlign)
    return us.align(align)
  })

  // width
  const labelWidthSize = computed(() => {
    const width = props.labelWidth || (isGroup ? colLabelKey?.labelWidth?.value : props.labelWidth)
    return us.width(width)
  })

  // span
  const labelSpan = computed(() => {
    const span = props.span || (isGroup ? colLabelKey?.span?.value : props.span)
    return span
  })
</script>
<style lang="scss" scoped>
  .col-label-wrap {
    display: flex;
    width: 100%;
    &.is-vertical {
      flex-direction: column;
      .col-label__inner {
        width: auto;
      }
    }
    // margin-bottom: 16px;
    .col-label__label {
      line-height: 22px;
      padding-right: 16px;
      color: var(--n-black-light-2);
    }
    .col-label__inner {
      flex: 1;
      width: 0;
      line-height: 22px;
      word-break: break-all;
      color: var(--n-black-light-1);
    }
  }
  .col-label__right {
    text-align: right;
  }
</style>
